<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ObjectObserver</title>
	<!-- Script Common *** JS -->
	<script async src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

	<!-- Script Config *** JS -->
	<script async src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>
</head>
<body>
	<h1>ObjectObserver</h1>
	<div id="demoWrap"></div>
<script type="module" src="../../../src/class/ObserverObject.js"></script>
<script type="module" data-toggle="previewCode" data-target="#demoWrap">
	import ObserverObject from "../../../src/class/ObserverObject.js";
	var onChange = function (key, nextValue, prevValue, target) {
		console.log('onChange: ' + window.Proxy ? JSON.stringify(target) : 'Non-Proxy' + ' - ' + key + ' - ' + value);
	};
	var onUpdate = function (prevValue, nextValue) {
		console.log('onUpdate: prevValue:'+ JSON.stringify(prevValue));
		console.log('onUpdate: nextValue:'+ JSON.stringify(nextValue) + '\n');
	};
	var channel1 = {
		seoName: 'channel-1',
		id: 111,
		noAccess: true,
	};
	var channel2 = {
		seoName: 'channel-2',
		id: 112,
		noAccess: true,
	};
	var channel3 = {'a': '000'};

	var channels = [
		new ObserverObject(channel1, {onChange: onChange, onUpdate: onUpdate}),
		new ObserverObject(channel2, {onChange: onChange, onUpdate: onUpdate}, ['bb']),
	];
	channels[0].noAccess = false;
	channels[0].seoName = 'seoName0';
	channels[1].id = 222;
	channels[0].triggerUpdate;

	channels[0].seoName = 'seoName1';
	channels[0].triggerUpdate;

	channels[1].id = 222111;
	channels[1].triggerUpdate;

	channels[1].bb = 222111;
	channels[1].triggerUpdate;

	channels[1].bb = 333333;
	channels[1].triggerUpdate;

	// var observer1 = new ObserverObject(channel3, {onChange: onChange}, ['dd']);
	var observer1 = new ObserverObject(channel3, {onChange: onChange, onUpdate: onUpdate}, ['a', 'dd', 'e3']);
	observer1.dd = false;
	observer1.e3 = false;
	observer1.dd = true;
	observer1.e3 = true;
	observer1.triggerUpdate;
</script>
</body>
</html>
